<template>
  <div class="log">
    <div class="log-top center">
      <router-link to="/My">
        <i class="el-icon-arrow-left"></i>
      </router-link>
      <p>登陆/注册管理</p>
    </div>
    <div class="one">
      <div class="log-main">
        <div class="log-main-dl">
          <span @click="getdl" :class="state ? 'one' : ''">登录</span>
          <span @click="getzc" :class="state ? '' : 'one'">注册</span>
        </div>
        <ul v-if="state">
          <li>账号：<input type="text" placeholder="请输入账号" v-model="userMessage.username" /></li>
          <li>密码：<input type="password" placeholder="请输入密码" v-model="userMessage.password" /></li>
          <li><button @click="login()">登录</button></li>
          <li><a>忘记密码</a></li>
        </ul>
        <ul v-else>
          <li>账号：<input type="text" placeholder="请输入新建账号" v-model="newMessage.username" /></li>
          <li>密码：<input type="password" placeholder="请输入密码" v-model="newMessage.password" /></li>
          <li><button @click="registered()">注册</button></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
	  state: true,
	  //登陆
	  userMessage:{
		  username:'',
		  password:''
	  },
	  //注册
	  newMessage:{
		  username:'',
		  password:''
	  },
    };
  },
  methods: {
    getdl: function () {
      this.state = true;
    },
    getzc: function () {
      this.state = false;
    },
    //登陆
    login() {
      //获取本地数组数据
	  var userInfo = JSON.parse(localStorage.getItem("userInfo")) || [];
	  //判断账号是否存在
	  var index=userInfo.findIndex(v=>v.username===this.userMessage.username&&v.password===this.userMessage.password)
	  if(index==-1){
		  this.$message('账号密码错误');
	  }else{
		  //登陆成功保存保存cookie信息
		  localStorage.setItem('cookie', JSON.stringify(this.userMessage.username));
		  this.$router.go(-1)
	  }
	},
	//注册
	registered(){
		if(this.newMessage.username.trim().length==0||this.newMessage.password.trim().length==0){
			this.$message('账号密码错误');
		}else{
			//获取本地数组数据
	        var userInfo = JSON.parse(localStorage.getItem("userInfo")) || [];
			//把注册的账号密码存储到本地存储中
			userInfo.push(this.newMessage)
			localStorage.setItem('userInfo', JSON.stringify(userInfo));
			this.$message('注册成功');
			this.state=true
		}
	}
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.one {
  background-color: #ccc;
  height: 800px;
  padding: 50px 0;
}
i {
  font-size: 20px;
  float: left;
  font-weight: 600;
}
li {
  list-style: none;
  line-height: 40px;
  padding: 0 10px;
}
.log {
  background-color: #ff0000;
}
.center {
  width: 94%;
  margin: 0 auto;
}
.log-top {
  background-color: #ff0000;
  padding: 10px 0;
}
.log-top > p {
  text-align: center;
  font-weight: 600;
}
.log-main {
  background-color: #ffffff;
  width: 80%;
  height: 250px;
  margin: 0px auto;
  font-size: 16px;
}
.log-main input {
  width: 75%;
  margin: 10px 0;
  float: right;
}
.log-main-dl {
  padding: 0 10px;
}
.log-main-dl > span {
  padding: 5px 20px;
  line-height: 40px;
  font-size: 20px;
}
.one {
  border-bottom: 1px solid #000000;
}
button {
  width: 100%;
}
</style>
